作者：甜心菇 | 来源：互联网 | 2024-10-31 17:28
本文介绍了如何通过掌握IScroll技巧来实现流畅的上拉加载和下拉刷新功能。首先，需要按正确的顺序引入相关文件：1.Zepto；2.iScroll.js；3.scroll-probe.js。此外，还提供了完整的代码示例，可在GitHub仓库中查看。通过这些步骤，开发者可以轻松实现高效、流畅的滚动效果，提升用户体验。
引入文件顺序
1、zepto
2、iscroll.js
3、scroll-probe.js
链接
完整代码：https://github.com/dirkhe1051931999/writeBlog/tree/master/iscroll
iscroll： https://github.com/cubiq/iscroll/
参数手册：https://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
html
"header">iScroll
"
wrapper">
"
scroller">
"
pullDown" class=
"">
class="pullDownLabel">
class="pulldown-tips">↓下拉刷新
"list">
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
"
pullUp" class=
"">
class="pullUpLabel">加载更多
"footer">
初始化
var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
pullDown.hide();
pullUp.hide();
myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,//用户是否可以拖动滚动条
shrinkScrollbars: 'scale', //按比例的收缩滚动条
fadeScrollbars: true, //是否渐隐滚动条
scrollY:true,
probeType: 2, //probeType：2 滚动时每隔一定时间触发
bindToWrapper:true //光标、触摸超出容器时，是否停止滚动
});
myScroll.on("scroll",function(){
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
if(this.y > 60){//下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新数据");
loadingStep = 1;
myScroll.refresh();
// 上拉加载
}else if(this.y <(this.maxScrollY - 20)){//上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("↑上拉加载");
loadingStep = 1;
pullUpAction();
}
}
});
// 下拉刷新
myScroll.on("scrollEnd",function(){
if(loadingStep == 1){
if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
pullDownAction();
}
}
});
函数
function pullDownAction(){
var li;
setTimeout(function(){
$.ajax({
type: 'GET',
url: './test.php',
dataType: 'json',
timeout: 300,
success: function(data){
li = ""+ data +""
;
container.prepend(li);
},
error: function(xhr, type){
alert('Ajax error!'
)
}
})
pullDown.attr('class',''
).hide();
myScroll.refresh();
loadingStep = 0
;
$(".pulldown-tips"
).show();
},500
);
}
function pullUpAction(){
setTimeout(function(){
$.ajax({
type: 'GET'
,
url: './test.php'
,
dataType: 'json'
,
timeout: 300
,
success: function(data){
li = "
"+ data +""
;
container.append(li);
},
error: function(xhr, type){
alert('Ajax error!'
)
}
})
pullUp.attr('class',''
).hide();
myScroll.refresh();
loadingStep = 0
;
},500
);
}
document.addEventListener('touchmove',
function (e) { e.preventDefault(); },
false);
京公网安备 11010802041100号